<!-- eslint-disable @typescript-eslint/no-use-before-define -->
<template>
	<div class="h-full">
		<n-card class="h-full shadow-sm rounded-16px">
			<n-form class="w-full h-40px" size="small" inline>
				<n-form-item label="计划投入日期:" label-placement="left">
					<n-date-picker v-model:value="range" type="daterange" clearable :default-time="['00:00:00', '00:00:00']" />
				</n-form-item>
				<n-form-item label="成品料号:" label-placement="left">
					<n-input v-model:value="productspecName" type="text" placeholder="模糊查询" />
				</n-form-item>
				<n-form-item label="内部订单:" label-placement="left">
					<n-input v-model:value="parentLotName" type="text" placeholder="模糊查询" />
				</n-form-item>
				<n-form-item label="订单状态:" label-placement="left" style="width: 200px">
					<n-select v-model:value="selectedLotTypes" clearable :options="lotTypes" />
				</n-form-item>
				<n-form-item label="" label-placement="left">
					<n-button type="primary" :on-click="getPlanAct">
						<template #icon><icon-mdi-map-search-outline /></template>
						查询
					</n-button>
				</n-form-item>
			</n-form>
			<vxe-grid v-bind="dailyOptions" :cell-style="cellStyle" @cell-click="cellClickEvent"></vxe-grid>
			<n-modal v-model:show="showModal">
				<n-card style="width: 1280px" title="工单详情" :bordered="false" size="huge" role="dialog" aria-modal="true">
					<vxe-table
border :column-config="{ resizable: true }"
						:tree-config="{ transform: true, rowField: 'lotname', parentField: 'parentlotname', accordion: true }"
						:data="parentLot.tableData">
						<vxe-column field="lotname" title="工单号" width="200" tree-node></vxe-column>
						<vxe-column field="planqty" title="计划数量"></vxe-column>
						<vxe-column field="processoperationname" title="站点"></vxe-column>
						<vxe-column field="description" title="描述"></vxe-column>
						<vxe-column field="subproductokquantity" title="工单数量"></vxe-column>
					</vxe-table>
				</n-card>
			</n-modal>
		</n-card>
	</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import type { VxeGridProps, VxeTablePropTypes } from 'vxe-table';
import dayjs from 'dayjs';
import { fetchLotDataByProductRequest, fetchParentLotActByState } from '@/service/api';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const range = ref<[number, number]>([dayjs().startOf('month').valueOf(), Date.now()]);

const productspecName = ref('');
const parentLotName = ref('');
const selectedLotTypes = ref('Created');
const lotTypes = ref<Array<SelectOption>>([
	{
		label: '未完成',
		value: 'Created'
	},
	{
		label: '已完成',
		value: 'Completed'
	}
]);

const showModal = ref(false);

const dailyOptions = reactive<VxeGridProps>({
	border: true,
	size: 'mini',
	maxHeight: '550px',
	showFooter: false,
	align: null,
	stripe: true,
	loading: false,
	columnConfig: {
		resizable: true
	},
	columns: [
		{
			field: 'CUSTOMER',
			title: '客户',
			width: '220px',
			showOverflow: true,
			filters: [{ data: '' }],
			filterRender: { name: 'FilterInput' }
		},
		{
			field: 'LOTNAME',
			title: '内部订单',
			width: '150px',
			filters: [{ data: '' }],
			filterRender: { name: 'FilterInput' }
		}, { field: 'CREATETIME', sortable: true, title: '创建时间', width: '150px' },
		{
			field: 'PRODUCTSPECNAME',
			title: '料号',
			width: '180px',
			filters: [{ data: '' }],
			filterRender: { name: 'FilterInput' }
		},
		{ field: 'PLANQTY', title: '总订单数', width: '120px' },
		{ field: 'ACTQTY', title: '投入数', width: '120px' },
		{ field: 'R01', title: '上片数', width: '120px' },
		{ field: 'R01RATIO', title: '上片完成率', width: '120px' },
		{ field: 'R08', title: '封焊数', width: '120px' },
		{ field: 'R08RATIO', title: '封焊完成率', width: '120px' },
		{ field: 'STOCKIN', title: '入库数', width: '120px' },
		{ field: 'PRSTOCKIN', title: '订单入库数', width: '120px' },
		{ field: 'STOCKINRATIO', title: '完成率', width: '120px' },
		{ field: 'LOTSTATE', title: '订单状态', width: '120px' }
	],
	toolbarConfig: {
		buttons: [],
		export: true,
		print: true
	},
	data: [],
	mergeCells: [],
	exportConfig: {
		remote: false,
		types: ['xlsx'],
		modes: ['current', 'selected', 'all']
	}
});

const getPlanAct = async () => {
	dailyOptions.loading = true;
	const result = await fetchParentLotActByState(
		dayjs(range.value[0]).format('YYYYMMDD'),
		dayjs(range.value[1]).format('YYYYMMDD'),
		productspecName.value,
		parentLotName.value,
		selectedLotTypes.value
	);
	if (result.data) {
		dailyOptions.data = result.data;
		dailyOptions.loading = false;
	}
};

const parentLot = reactive({
	tableData: []
});

const cellClickEvent = async ({ row }: { row: any }) => {
	if (row.releasedwo) {
		const result = await fetchLotDataByProductRequest(row.releasedwo);
		if (result.data) {
			parentLot.tableData = result.data as any;
		}
		showModal.value = true;
	}
};

const cellStyle: VxeTablePropTypes.CellStyle = ({ row, column }) => {
	if (column.field === 'createdwo') {
		if (row.releasedwo) {
			return {
				color: '#ffffff',
				backgroundColor: '#187'
			};
		}
		return {
			color: '#ffffff',
			backgroundColor: '#f13900'
		};
	}
	return null;
};
</script>

<style scoped ></style>
